<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Footer1</title>
 <style>
  body {
   background-color: #f6f6f6 !important;
   color: #3c3c3c;
   margin: 0;
  }

  ul {
   list-style: none;
   padding: 0;
   margin: 0;
  }
  a {
   text-decoration: none;
   color: #3c3c3c;
  }
  .container {
   padding: 0 360px;
  }
  .blank {
   height: 1000px;
   width: 1000px;
  }
  footer {
   background-color: #f2f2f2;
   min-height: 300px;
   padding-top: 20px;
   
  }

  footer .footerMenu {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
  }

  footer .footerMenu li .list {
   display: grid;
   gap: 10px;
  }

  footer .footerMenu li .list li {
   height: 30px;
   width: 120px;
   /* background-color: #f6f6f6; */
  }

  footer .footerMenu li .list li:nth-child(1) {
   /* background-color: #b9ccdd; */
   font-weight: bolder;
   font-size: 20px;
   margin-bottom: 10px;
  }

  footer .footerMsg {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   border-top: 1px solid #e6e6e6;
   
  }

  footer .footerMsg .left {
   line-height: 40px;
   text-align: right;
  }

  footer .footerMsg .right {
   line-height: 40px;
  }
 </style>
</head>

<body>
 <!-- 用blank模拟其他内容 -->
 <div class="blank"></div>
 <!-- 全屏页脚--开始 -->
 <footer>
  <div class="container">
   <ul class="mb-20 footerMenu">
    <li>
     <ul class="list">
      <li>关于大胖</li>
      <li>大胖简介</li>
      <li>可持续发展</li>
      <li>信任中心</li>
      <li>管理信息</li>
      <li>招贤纳士</li>
      <li>供应商</li>
      <li>查看更多</li>
     </ul>
    </li>
    <li>
     <ul class="list">
      <li>关于大胖</li>
      <li>可持续发展</li>
      <li>信任中心</li>
      <li>管理信息</li>
      <li>招贤纳士</li>
      <li>供应商</li>
      <li>查看更多</li>
     </ul>
    </li>
    <li>
     <ul class="list">
      <li>关于大胖</li>
      <li>大胖简介</li>
      <li>可持续发展</li>
      <li>信任中心</li>
      <li>管理信息</li>
     </ul>
    </li>
    <li>
     <ul class="list">
      <li>关于大胖</li>
      <li>大胖简介</li>
      <li>可持续发展</li>
      <li>供应商</li>
      <li>查看更多</li>
     </ul>
    </li>
    <li>
     <ul class="list">
      <li>关于大胖</li>
      <li>大胖简介</li>
      <li>可持续发展</li>
      <li>信任中心</li>
      <li>管理信息</li>
      <li>查看更多</li>
     </ul>
    </li>
   </ul>
   <div class="footerMsg">
    <div class="left">松蕴大胖学习简单grid布局</div>
    <div class="right">
     <a href="#">测试备案号0000000000</a>
    </div>
   </div>
  </div>
 </footer>
 <!-- 全屏页脚--结束 -->
</body>

</html>